<template>
    <div class="rightOne">
        <div class="left">
            <div class="title">完成注册并移交重大项目和高能级项目 <span>347</span>个</div>
            <div class="leftcharts">
                <div class="chartsChild1" ref="chartsChild1Ref">1</div>
                <div class="chartsChild2" ref="chartsChild2Ref">1</div>
            </div>

        </div>
        <div class="right">
            <div class="title">按三次产业分</div>
            <div class="rightcharts" ref="rightChartsRef"></div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick, markRaw, onBeforeUpdate } from 'vue'
import * as echarts from 'echarts';
const props = defineProps({
    info1: String,
    info2: String,
    info3: Object
})
const chartsChild1Ref = ref()
const chartsChild2Ref = ref()
const rightChartsRef = ref()

const state = reactive({
    myCharts: [] as any,
    chartsChild1Data: null as any,
    chartsChild2Data: null as any,
    rightChartsData: null as any,
})

const initchartsChild1 = () => {
    state.chartsChild2Data = markRaw(echarts.init(chartsChild1Ref.value));
    var value = props?.info1 as any;
    const option = {
        title: {
            text: `${value}%`,
            subtext: '注册移交率',
            left: 'center',
            top: 'center', //top待调整
            textStyle: {
                color: '#fff',
                fontSize: 30,

            },
            subtextStyle: {
                color: '#fff',
                fontSize: 14,

                top: 'center'
            },
            itemGap: -4 //主副标题间距
        },
        xAxis: {
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            }
            // data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        },
        yAxis: {
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        series: [
            // 内圆
            {
                type: 'pie',
                radius: ['0', '50%'],
                center: ['50%', '50%'],
                z: 0,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#1147A1'
                        },
                        {
                            offset: 1,
                            color: '#1147A1'
                        }
                        ]),
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                },
                label: {
                    normal: {
                        position: "center",

                    }
                },
                data: [100],
            },
            // 进度圈
            {
                type: 'pie',
                clockWise: true,
                radius: ["60%", "55%"],
                data: [{
                    value: value,
                    itemStyle: {
                        normal: {
                            borderWidth: 10,
                            borderColor: {
                                colorStops: [{
                                    offset: 0,
                                    color: '#69FFE3' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#2A69EC' || '#2196F3' // 100% 处的颜色
                                }]
                            },
                            color: { // 完成的圆环的颜色
                                colorStops: [{
                                    offset: 0,
                                    color: '#69FFE3' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#2A69EC' || '#2196F3' // 100% 处的颜色
                                }]
                            },
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                        },
                    }
                },
                {
                    name: 'gap',
                    value: 100 - value,
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: 'rgba(0, 0, 0, 0)',
                            borderColor: 'rgba(0, 0, 0, 0)',
                            borderWidth: 0,
                        }
                    },
                }
                ]
            },
            //刻度尺
            {
                // name: "白色圈刻度",
                type: "gauge",
                radius: "74%",
                startAngle: 225, //刻度起始
                endAngle: -134.8, //刻度结束
                z: 4,
                axisTick: {
                    show: true,
                    lineStyle: {
                        width: 2,
                        color: '#69FFE3'
                    }
                },
                splitLine: {
                    length: 16, //刻度节点线长度
                    lineStyle: {
                        width: 2,
                        color: '#69FFE3'
                    } //刻度节点线
                },
                axisLabel: {
                    color: 'rgba(255,255,255,0)',
                    fontSize: 12,
                }, //刻度节点文字颜色
                pointer: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        opacity: 0
                    }
                },
                detail: {
                    show: false
                },
                data: [{
                    value: 0,
                    name: ""
                }]
            },
            // 刻度圈
            {
                "type": "pie",
                "radius": ["0%", "73%"],
                "center": ["50%", "50%"],
                "avoidLabelOverlap": false,
                "label": {
                    "normal": {
                        "show": false,
                        "position": "center"
                    },
                    "emphasis": {
                        "show": false,
                        "textStyle": {
                            "fontWeight": "bold"
                        }
                    }
                },
                "itemStyle": {
                    "normal": {
                        "color": {
                            "type": "linear",
                            "x": 0,
                            "y": 0,
                            "x2": 0,
                            "y2": 1,
                            "colorStops": [{
                                "offset": 0.05,
                                "color": "rgba(32,36,107, 0.2)"
                            }, {
                                "offset": 0.5,
                                "color": "rgba(32,36,107,0.3)"
                            }, {
                                "offset": 0.95,
                                "color": "rgba(32,36,107, 0.2)"
                            }]
                        }
                    }
                },
                "labelLine": {
                    "normal": {
                        "show": false
                    }
                },
                "data": [{
                    "value": 3235
                }]
            },
            //最外层圈

        ]
    };
    state.chartsChild2Data.setOption(option);
    state.myCharts.push(state.chartsChild2Data);

}
const initchartsChild2 = () => {
    state.chartsChild2Data = markRaw(echarts.init(chartsChild2Ref.value));
    let value = props.info2;
    let title = '总投资(亿元)';
    let int = Number(value).toFixed(2).split('.')[0];
    let float = Number(value).toFixed(2).split('.')[1];

    const option = {

        title: {
            text: '{a|' + int + '}{b|.' + float + '}\n{c|' + title + '}',
            x: 'center',
            y: 'center',
            textStyle: {
                rich: {
                    a: {
                        fontSize: 34,
                        color: '#69FFE3'
                    },
                    b: {
                        fontSize: 20,
                        color: '#69FFE3',
                        padding: [0, 0, 14, 0]
                    },
                    c: {
                        fontSize: 14,
                        color: '#ffffff',
                        padding: [5, 0]
                    }
                }
            }
        },
        series: [
            {
                type: 'gauge',
                radius: '75%',
                clockwise: false,
                startAngle: '90',
                endAngle: '-269.9999',
                splitNumber: 25,
                detail: {
                    offsetCenter: [0, -20],
                    formatter: ' '
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: [
                            [0, '#69FFE3'],
                            [99 / 100, '#69FFE3'],
                            [1, '#69FFE3']
                        ],
                        width: 8
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    length: 32,
                    lineStyle: {
                        color: '#051F54',
                        width: 6
                    }
                },
                axisLabel: {
                    show: false
                }
            },
        ]
    };
    state.chartsChild2Data.setOption(option);
    state.myCharts.push(state.chartsChild2Data);
}
const initrightCharts = () => {
    state.rightChartsData = markRaw(echarts.init(rightChartsRef.value));
    const option = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: props.info3?.names,
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#063374",
                    width: 1,
                    type: "solid"
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#00c7ff",
                    fontSize: 16,
                }
            },
        }],
        yAxis: [{
            type: 'value',
            name: '个(数量)',
            axisLabel: {
                formatter: '{value}',
                fontSize: 18,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#00c7ff",
                    width: 1,
                    type: "solid"
                },
            },
            splitLine: {
                lineStyle: {
                    color: "#063374",
                }
            }
        }],
        series: [{
            type: 'bar',
            data: props.info3?.value1,
            barWidth: 10, //柱子宽度
            barGap: 1, //柱子之间间距
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#2196F3'
                    }, {
                        offset: 1,
                        color: '#2196F3'
                    }]),
                    opacity: 1,
                }
            }
        }, {
            type: 'bar',
            data: props.info3?.value2,
            barWidth: 10,
            barGap: 1,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#69FFE3'
                    }, {
                        offset: 1,
                        color: '#69FFE3'
                    }]),
                    opacity: 1,
                }
            }
        }]
    };
    state.rightChartsData.setOption(option);
    state.myCharts.push(state.rightChartsData);
}


// 批量设置 echarts resize
const initEchartsResizeFun = () => {
    nextTick(() => {
        for (let i = 0; i < state.myCharts.length; i++) {
            setTimeout(() => {
                state.myCharts[i].resize();
            }, i * 1000);
        }
    });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
    window.addEventListener('resize', initEchartsResizeFun);
};
// 页面加载时
onBeforeUpdate(() => {
    initchartsChild1()
    initchartsChild2()
    initrightCharts()
    initEchartsResize()
});
</script>

<style scoped lang="scss">
.rightOne {
    display: flex;
    padding: 5px;
    height: calc(100% - 45px);

    .title {
        color: #AEBBC2;
        font-size: 18px;
    }

    .left {
        width: 55%;
        display: flex;
        flex-direction: column;

        .leftcharts {
            flex: 1;

            display: flex;

            .chartsChild1 {
                width: 50%;
                flex: 1;

            }

            .chartsChild2 {
                width: 50%;
                flex: 1;

            }
        }
    }

    .right {
        width: 45%;
        display: flex;
        flex-direction: column;

        .rightcharts {
            height: 100%;
            width: 100%;
        }
    }
}
</style>